<style>
    .cropImg {
        position: relative;
        width: 100%;
        height: 300px;
        background-color: #CCCCCC;
        color: #FFFFFF;
        line-height: 300px;
        text-align: center;
        border: 1px dashed rgba(0, 0, 0, .4);
    }

    .cropImg > img {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        -moz-transform: translate3d(-50%, -50%, 0);
        -ms-transform: translate3d(-50%, -50%, 0);
        -o-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
    }
</style>
<div id="cropImg" class="cropImg">
    <span>图片剪切</span><img src=""/>
</div>
<div class="crop" id="crop">
    <input type="file" accept="image/*" class="crop-input">
    <div class="crop-mask"></div>
    <div class="crop-wrap">
        <div class="crop-wrap-content">
            <div class="crop-wrap-thum"></div>
            <div class="crop-wrap-spinner">Loading...</div>
        </div>
        <div class="crop-wrap-group">
            <a href="javascript:;" class="croped">剪切</a>
        </div>
        <div class="crop-wrap-group">
            <a href="javascript:;" class="zoomIn">放大</a>
            <a href="javascript:;" class="zoomOut">缩小</a>
        </div>
    </div>
</div>
<form enctype="multipart/form-data" id="avatarformid"></form>

<script>
    var crop=document.querySelector('#cropImg');
    var cropNote=crop.querySelector('span');
    var cropImg=crop.querySelector('img');

    var cropper=new Cropper({
       el:'#crop',
       cp:'#cropImg',
       callback:function (dataUrl,dataBlob) {

           cropNote.style.display='none';
           cropImg.style.display='block';
           cropImg.src=dataUrl;
       }
    });
</script>